<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
            // class ItemList extends React.Component{
                const numbers = [1,2,3,4,5];
                const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
            //     render(){
            //         return (
            //             <div>
            //                {listItems} 
            //             </div>
            //         );
            //     }
            // }

            function NumberList(props) {
              const numbers = props.number;
              const listItems = numbers.map((number) => <li>{number}</li>);
              return (<ul>{listItems}</ul>);
            }

            ReactDOM.render(
              <div>
                {/*<NumberList number={numbers} />*/}
                <ul>{listItems}</ul>
              </div>,
              document.getElementById('root') 
            )
    </script>
  </body>
</html>